{% extends "layout.html" %}

{% block head %}
{{ parent() }}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});

google.setOnLoadCallback(function()
{
	// Visitors
	var visitors = new google.visualization.AreaChart(document.getElementById('visitors'));
	
	visitors.draw(new google.visualization.DataTable(
	{
		'cols': [
			{'id': 'date', 'label': '{{ __("date") }}', 'type': 'date'},
			{'id': 'visitors', 'label': '{{ __("admin", "Statistics", "visitors") }}', 'type': 'number'},
			{'id': 'unique', 'label': '{{ __("admin", "Statistics", "unique") }}', 'type': 'number'}
		],
		'rows': [
			{% for day,stats in days %}
			{'c': [{'v': new Date({{ day }})}, {'v': {{ stats.visits }}}, {'v': {{ stats.new }}}]},
			{% endfor %}
		]
	}));
	
	// Views
	var views = new google.visualization.AreaChart(document.getElementById('views'));
	
	views.draw(new google.visualization.DataTable(
	{
		'cols': [
			{'id': 'date', 'label': '{{ __("date") }}', 'type': 'date'},
			{'id': 'views', 'label': '{{ __("admin", "Statistics", "views") }}', 'type': 'number'}
		],
		'rows': [
			{% for day,stats in days %}
			{'c': [{'v': new Date({{ day }})}, {'v': {{ stats.views }}}]},
			{% endfor %}
		]
	}));
});
</script>
{% endblock %}

{% block body %}
<h2>{{ __('admin', 'Statistics', 'visitors') }}</h2>
<div class="box">
	<div id="visitors" style="width: 100%; height: 200px;"></div>
</div>
<h2>{{ __('admin', 'Statistics', 'views') }}</h2>
<div class="box">
	<div id="views" style="width: 100%; height: 200px;"></div>
</div>
{% endblock %}